<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3.虚拟DOM与真实DOM</title>
    <style>
      .title {
        background-color: orange;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react 核心库 -->
    <script
      type="text/javascript"
      src="../../react-js/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../../react-js/react-dom.development.js"
    ></script>
    <!-- 引入babel 用于jsx转为js -->
    <script type="text/javascript" src="../../react-js/babel.min.js"></script>

    <script type="text/babel">
      const myId = 'TiTle';
      const myData = 'HeLlo,rEact';
      // 1.创建虚拟DOM
      const VDOM = (
        <div>
          <h2 className='title' id={myId.toLowerCase()}>
            <span style={{ color: 'white', fontSize: '20px' }}>
              {myData.toLowerCase()}
            </span>
          </h2>
          <input type='text' />
          <good>123</good>
        </div>
      );
      // 2.渲染虚拟DOM到页面上
      ReactDOM.render(VDOM, document.getElementById('test'));

      /*
        jsx语法规则：
            1.定义虚拟DOM时，不要写引号。
            2.标签中混入js表达式时要用{}。
            3.样式类名指定不要用class，要用className
            4.内联样式，要用style={{key:value}}的形式去写
            5.只有一个根标签
            6.标签必须闭合
            7.标签首字母
                （1）标签首字母小写，则把标签转换为 HTML 对应的标签，若没有，则报错
                （2）标签首字母大写，则渲染对应组件，若没有定义组件，则报错
      */
    </script>
  </body>
</html>
